<template>
  <div class="recomm-view">
    <div class="section">
      <div class="title">
        <h2>编辑推荐</h2>
      </div>
      <div class="songlist">
        <div v-for="item in 6" :key="item" class="item">
          <span>🎧1111万</span>
          <img
            src="http://p1.music.126.net/gxgc6M0zvUhIM_b_QWk-oQ==/109951166652386269.jpg?param=140y140"
            alt=""
          />
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
            est non atque, facilis nobis optio nostrum iure ad, perspiciatis
            velit sequi voluptatum soluta, iusto explicabo veritatis nam
            molestiae blanditiis adipisci!
          </p>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <h2>最新音乐</h2>
      </div>
      <div class="content">
        <div v-for="item in 10" :key="item" class="cell">
          <div class="left">
            <h3>终有一散的人们</h3>
            <p>周震男 - You jump,I jump</p>
          </div>
          <span @click="$router.push('/play')">▶️</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecommendView'
}
</script>

<style lang="less" scoped>
.recomm-view {
  background-color: #fcfcfd;
  .section {
    .title {
      height: 50px;
      display: flex;
      align-items: center;
      h2 {
        font-weight: 500;
        padding-left: 12px;
        font-size: 18px;
        position: relative;
        &::before {
          content: '';
          width: 2px;
          height: 70%;
          position: absolute;
          background-color: #d43c33;
          left: 0;
          top: 4px;
        }
      }
    }
    .songlist {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 33.333%;
        border: 1px solid #fcfcfd;
        position: relative;
        span {
          position: absolute;
          color: white;
          right: 2px;
          top: 2px;
          font-size: 14px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          text-align: right;
        }
        img {
          display: block;
          width: 100%;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          padding: 0 3px;
          font-size: 14px;
        }
      }
    }
    .content {
      padding: 0 3px;
      .cell {
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #efeff0;
        .left {
          flex: 1;
          h3 {
            font-weight: normal;
            font-size: 18px;
          }
          p {
            margin-top: 4px;
            font-size: 14px;
            color: #888888;
          }
        }
        span {
          font-size: 20px;
        }
      }
    }
  }
}
</style>
